<!DOCTYPE html>
<!--
     Any copyright is dedicated to the Public Domain.
     http://creativecommons.org/publicdomain/zero/1.0/
--><!-- This testcase checks that flex items are painted as pseudo-stacking
     contexts, instead of full stacking contexts. In other words, content
     inside of one flex item should be able to iterleave between pieces of
     content in another flex item, if we set appropriately interleaving
     "z-index" values. --><!-- This was resolved by the CSSWG in April 2013:
     http://krijnhoetmer.nl/irc-logs/css/20130403#l-455 --><html>
<!-- Mirrored from test.csswg.org/suites/css-flexbox-1_dev/nightly-unstable/html/flexbox-items-as-stacking-contexts-003.htm by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 23 Dec 2023 16:15:11 GMT -->
<head>
  <title>CSS Test: Testing that flex items paint as pseudo-stacking contexts (like inline-blocks), instead of full stacking contexts: 'z-index' should let descendants interleave</title>
  <link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
  <link href="http://www.w3.org/TR/css-flexbox-1/#painting" rel="help">
  <link href="http://test.csswg.org/suites/css-flexbox-1_dev/nightly-unstable/html/reference/flexbox-items-as-stacking-contexts-003-ref.htm" rel="match">
  <style>
    .flexContainer {
      background: orange;
      display: flex;
      justify-content: space-between;
      width: 70px;
      height: 20px;
      padding: 2px;
      margin-bottom: 2px;
    }
    .item1 {
      background: lightblue;
      width: 30px;
      min-width: 0; /* disable default min-width:auto behavior */
      padding: 2px;
    }
    .item2 {
      background: yellow;
      width: 30px;
      padding: 2px;
    }
    .grandchildA {
      background: purple;
      width: 80px;
      height: 6px;
      position: relative;
      z-index: 10;
    }
    .grandchildB {
      background: teal;
      width: 80px;
      height: 6px;
      position: relative;
      z-index: 20;
    }
    .grandchildC {
      background: lime;
      width: 20px;
      height: 16px;
      position: relative;
      /* This z-index should interleave this content
         between grandchildA and grandchildB: */
      z-index: 15;
    }
  </style>
</head>
<body>
  <!-- This flex container's first flex item has content that overflows
       and overlap the second flex item.  The z-index values are set such
       that this content should interleave; grandchildC should
       paint on top of grandchildA, but underneath grandchildB. -->
  <div class="flexContainer"><div class="item1"><div class="grandchildA"></div><div class="grandchildB"></div></div><div class="item2"><div class="grandchildC"></div></div></div>


</body>
<!-- Mirrored from test.csswg.org/suites/css-flexbox-1_dev/nightly-unstable/html/flexbox-items-as-stacking-contexts-003.htm by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 23 Dec 2023 16:15:11 GMT -->
</html>